document.onkeydown = function(event){
	event = event || window.event;
	var e = event.keyCode;
	
	if(e == Key.DOWN){
		if((player1.y + player1.pHeight) < board.height){ 
			player1.oldY = player1.y;
			player1.y += 6;
		}
	}else if( e == Key.UP){
		if((player1.y > 0)){
			player1.oldY = player1.y;
			player1.y += -6;
		}
	}
}
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

start = new Date().getTime();
last = start;


function draw() {

    diagCtx.clearRect(10,0,50,40);
    diagCtx.fillText("x: "+ball.x, 10, 10);
    diagCtx.fillText("y: "+ball.y, 10, 20);
	diagCtx.fillText("dx: "+ball.dx, 10, 30);
    diagCtx.fillText("dy: "+ball.dy, 10, 40);
    ctx.clearRect(ball.oldX, ball.oldY, 8, 8);
    ctx.fillRect(ball.x, ball.y, 8, 8);
	ctx.clearRect(player1.oldX, player1.oldY, player1.pWidth, player1.pHeight);
	ctx.fillRect(player1.x, player1.y, player1.pWidth, player1.pHeight);
}

function step() {
    draw();
    ball.move();
	
    animReq = requestAnimationFrame(step);
}

function startGame(canvas) {
    ctx = document.getElementById("pong").getContext('2d');
    ctx.fillStyle="black";

    diagCtx = document.getElementById("diag").getContext('2d');
    diagCtx.fillStyle="red";

    ctx.font = "bold 12px sans-serif";
    diagCtx.font = "bold 12px sans-serif";    

    board = new board();
    ball = board.ball;
	player1 = new player("Alice");
    step();
}



function player(name){
    this.name = name;
	this.pWidth = 3;
	this.pHeight = 50;
	this.x = 3;
	this.y = board.height/2 - this.pHeight/2
	this.oldX = this.x;
	this.oldY = this.y;
	this.lives = 5;
    //load shit from DB
}

function board(){
    this.width = 600;
    this.height = 300;
    this.ball = new ball();
    this.player1 = player("A");
    this.player2 = player("B");
}

function ball(){
    this.x = 300;
    this.y = 150;
	this.oldY = this.y;
	this.oldX = this.x;
    this.dx = 6;
    this.dy = 2;
    this.bounce = bounce;
    this.collide = collide;
    this.move = move;
}

function bounce(){
    this.dx = -this.dx;
    this.dy = -this.dy;
}

function collide(){
    if(this.y<5 || this.y > board.height-5){
		this.dy = -this.dy;
    }
    if((this.x<10 && (this.y>player1.y && this.y<(player1.y+player1.pHeight)))
		|| this.x > board.width-10){
		this.dx = -this.dx;
    }
	if(this.x<3){
		player1.lives += -1;
		ctx.clearRect(ball.x,ball.y,8,8);
		ball.x = board.width - 10;
	}
}

function move(){
	this.collide();
	this.oldX = this.x;
	this.oldY = this.y;
    this.x += this.dx;
    this.y += this.dy;
}

var Key =
{
    BACKSPACE: 8,
    TAB: 9,
    ENTER: 13,
    ESC: 27,
    PAGEUP: 33,
    PAGEDOWN: 34,
    END: 35,
    HOME: 36,
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
    HELP: 47,
    H: 72,
    K: 75,
    N: 78,
    R: 82,
    NUMERIC_PLUS: 107,
    F1: 112,
    F2: 113,
    F3: 114,
    F4: 115,
    F5: 116,
    F6: 117,
    F7: 118,
    F8: 119,
    F9: 120,
    F10: 121,
    F11: 122,
    F12: 123,
    PLUS: 187,
    MINUS: 189,
    V: 86
}